<template>
  <ContentWrap class="!mb-10px">
    <CardTitle title="商品信息" class="custom-text-16" />
    <el-row class="mt-15px">
      <el-col :span="24">
        <el-table :data="goodsList" :table-layout="'fixed'" style="width: 100%" border>
          <el-table-column type="expand" width="30">
            <template #default="{ row }">
              <div>
                <p class="ml-50px" v-if="row.employeeStr.length > 0">
                  <span>
                    销售员工:
                    <span v-for="item in row.employeeStr" :key="item" class="mr-5px"
                      >ID:{{ item.employeeId }} {{ item.employeeName }} {{ item.proportion }}%</span
                    >
                  </span>
                </p>
                <p class="ml-50px! mt-10px" v-if="getPayMentList(row.payMentList, 1).length > 0">
                  <span>
                    优惠明细：
                    <span
                      v-for="(item, index) in getPayMentList(row.payMentList, 1)"
                      class="mr-5px"
                      :key="index"
                      >{{ item.classifyName }} :{{ fenToYuan(item.balance) }} 元
                    </span>
                  </span>
                </p>
                <p class="ml-50px mt-10px" v-if="getPayMentList(row.payMentList, 0).length > 0">
                  <span>
                    支付明细：
                    <span
                      v-for="(item, index) in getPayMentList(row.payMentList, 0)"
                      class="mr-5px"
                      :key="index"
                      >{{ item.classifyName }} :{{ fenToYuan(item.balance) }} 元
                    </span>
                  </span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" prop="spuName" min-width="300">
            <template #default="{ row }">
              <div class="flex">
                <div class="flex items-center">
                  <div class="mr-[10px] flex items-center">
                    <el-image
                      :src="row.picUrl"
                      class="!h-[48px] !w-[48px] border-rd-4px"
                      @click="imagePreview(row.picUrl)"
                    >
                      <template #error>
                        <div class="image-slot">
                          <icon icon="ep:picture" />
                        </div>
                      </template>
                    </el-image>
                  </div>

                  <ElTooltip :content="row.spuName" placement="top">
                    <span class="overflow-ellipsis overflow-hidden">
                      <!-- <el-tag v-if="row.sales">赠品</el-tag> -->
                      <meton-tag
                        v-if="row?.sales"
                        :is-dict="false"
                        class="mr-5px"
                        effect="dark"
                        type="danger"
                        color="#ff0000"
                        :value="'赠品'"
                      />
                      {{ row.spuName }}
                      <meton-tag
                        :is-dict="false"
                        :is-text="true"
                        :value="`${row.specType ? skuSpecFormat(row?.properties) : ''},${row.spuType == 2 ? filterCardAttributes(row, true, true) : ''}`"
                      />
                    </span>
                  </ElTooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量" prop="count" />

          <el-table-column align="center" label="零售单价" :min-width="100" prop="price">
            <template #default="{ row }"
              ><div> {{ fenToYuan(row.price) }}元 </div>
              <div v-if="row.memberPrice > 0"> {{ fenToYuan(row.memberPrice) }}元 </div></template
            >
          </el-table-column>
          <el-table-column align="center" label="售后状态" :min-width="100" prop="afterSaleStatus">
            <template #default="{ row }">
              <dict-tag
                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
                :value="row.afterSaleStatus"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="实售单价" :min-width="100" prop="singlePrice">
            <template #default="{ row }">{{ fenToYuan(row.singlePrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="订单实售" :min-width="100" prop="realPrice">
            <template #default="{ row }">{{ fenToYuan(row.realPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="实付金额" :min-width="100" prop="otherPrice">
            <template #default="{ row }">{{ fenToYuan(row.otherPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="资产抵扣" :min-width="100" prop="assetPrice">
            <template #default="{ row }">{{ fenToYuan(row.assetPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="首次欠款" prop="arrearsPrice" min-width="100">
            <template #header>
              <div class="flex items-center justify-center">
                首次欠款
                <el-popover
                  :width="200"
                  trigger="hover"
                  placement="top"
                  :content="NoteOnOrder.SHOUCIQIANKUAN"
                >
                  <template #reference>
                    <Icon icon="ep:warning" class="m-l-2px" />
                  </template>
                </el-popover>
              </div>
            </template>
            <template #default="{ row }">{{ fenToYuan(row.arrearsPrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="剩余欠款" prop="leavePrice" min-width="100">
            <template #header>
              <div class="flex items-center justify-center">
                剩余欠款
                <el-popover
                  :width="200"
                  trigger="hover"
                  placement="top"
                  :content="NoteOnOrder.SHENGYUQIANKUAN"
                >
                  <template #reference>
                    <Icon icon="ep:warning" class="m-l-2px" />
                  </template>
                </el-popover>
              </div>
            </template>
            <template #default="{ row }">{{ fenToYuan(row.leavePrice) }}元</template>
          </el-table-column>
          <el-table-column align="center" label="小计" prop="subtotalPrice">
            <template #default="{ row }">{{ fenToYuan(row.subtotalPrice) }}元</template>
          </el-table-column>

          <!--  方便扩展每个订单配置的属性不一样  -->
          <slot name="extension"></slot>
        </el-table>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { createImageViewer } from '@/components/ImageViewer'
import { CardTitle } from '@/components/Card'
import { NoteOnOrder } from '@/utils/constants'
import { isEmpty } from 'lodash-es'
import { skuSpecFormat } from '@/utils'
import { useProductUtils } from '@/views/mall/product/hooks/useProduct'
const { filterCardAttributes } = useProductUtils()
defineOptions({ name: 'OrderGoodsInfo' })
/**
 *
 * @param paymentlist 支付列表
 * @param type  0 支付 1 优惠
 */
const getPayMentList = (paymentlist, type) => {
  if (isEmpty(paymentlist)) {
    return []
  }
  return paymentlist.filter((ele) => {
    return ele.classSubType == type
  })
}
defineProps({
  goodsList: propTypes.array.def([])
})
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
</script>
